<template>
  <div
      :style="'transform: translate('+props.controlOptions.x+'px, '+props.controlOptions.y+'px);width:'+props.controlOptions.width+'px;height:'+props.controlOptions.height+'px'"
      class="renderDom" ref="renderDom">
    <div
        :style="'display: flex;flex-direction: column;opacity: '+props.controlOptions.opacity+';background-color:'+props.controlOptions.backgroundColor">
      <div v-if="props.controlOptions.muteControl.enable&&platform!='screen'" style="left: 0px;top: 0px;right: 0;"
           class="mute-button">
        <template v-if="getTheme === 'default'">

          <img style="width: 100%;cursor: pointer;" @click="muteVoice" v-if="isMuteIco"
               src="@/assets/images/laba-on.png" alt="">
          <img style="width: 100%;cursor: pointer;" @click="unmuteVoice" v-else src="@/assets/images/laba-off.png"
               alt="">
        </template>
        <template v-else>
          <img style="width: 100%;cursor: pointer;" @click="muteVoice" v-if="isMuteIco"
               src="@/assets/images/laba-white-on.png" alt="">
          <img style="width: 100%;cursor: pointer;" @click="unmuteVoice" v-else src="@/assets/images/laba-white-off.png"
               alt="">
        </template>
      </div>
    </div>
  </div>

</template>
<script setup>
import {ref, onMounted, onBeforeUnmount, getCurrentInstance, computed} from 'vue'
import {mittTypes, viewportComponentTypes} from '@/util/types'
import {useSceneStore} from '@/stores/scene'

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const domZIndex = internalInstance.appContext.config.globalProperties.domZIndex
const sceneStore = useSceneStore()
const props = defineProps({
  platform: {
    type: String,
    default: null
  },
  controlOptions: {
    type: Object,
    default: null
  },
})
const isMuteIco = ref(true)
const muteVoice = function () {
  isMuteIco.value = false
  //静音
  emitter.emit(mittTypes.TIMELINE.MUTE_AUDIO)
}
const unmuteVoice = function () {
  isMuteIco.value = true
  emitter.emit(mittTypes.TIMELINE.UNMUTE_AUDIO)
}
// 按钮配置
const controlOptions = ref({
  x: 20,
  y: 20,
  width: 160,
  height: 60,
  zindex: 10,
  opacity: 1,
  backgroundColor: '#0026F0',
  "muteControl": {
    "enable": true,
    "name": "静音",
    "url": "/minioFile/aihuman/MyResources/voiceInput/2025-03-11_1899310644082073601.gif"
  }
})

const getTheme = computed(() => {
  return sceneStore.projectConfig?.uiConfig?.style?.type
})


onMounted(() => {

})

onBeforeUnmount(() => {

})
</script>
<style scoped>
.renderDom {
  position: absolute;
  bottom: 0;
  top: 0px;
  left: 0px;
  right: 0;
  margin: auto;
  width: 200px;
  height: 500px;
}
</style>
